<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/1.css">
</head>
<body>
    <div class="box">
        <ul class="users">
            <!-- <li>张三</li> -->
        </ul>
        <button>开始点名</button>
    </div>
    <script>
        // es5 字符串拼接  + ""  注意引号的对应
        // es6 新增模板字符串 `` 写法和html书写完全一致 插值：${}
        // 1 模拟数据
        var data = ["周凯玉","郭芷宁","张三","历史","但是","对我说","方法","周玉","郭宁","张和三","历发史","但发是"];
        // 2 获取元素
        var users = document.querySelector(".users");
        var btn = document.querySelector("button") ;
        
        // 3 将数据进行指定操作 -> 每一项变成一个li -> 作为users的内容
        users.innerHTML = data.map(function(item){
            // return "<li>" + item + "</li>"
            return `
                <li>
                    ${item}
                </li>
            `
        }).join("")
        // 注意：先渲 在获取
        var lis = users.querySelectorAll("li");
        console.log(lis)
        // 4 给按钮绑定点击事件
        btn.onclick = function(){
            // 按钮禁用 且修改按钮的样式
            btn.disabled = true
            btn.style.background = "#CCC"
            btn.innerHTML = "点名中..."
            // 给每一个人名  即 每一个li  循环遍历
            var timer = setInterval(function(){
                lis.forEach(function(li){
                    li.style.background = "#" + Math.random().toString(16).slice(2,8)
                })
            } , 100)

            // 6s之后停止点名
            setTimeout(function(){
                clearInterval(timer)
                // 按钮可用
                btn.disabled = false;
                btn.style.background = "purple"
                btn.innerHTML = "开始点名"
                // 停的那一刻 让所有的li重置红色
                lis.forEach(function(li){
                    li.style.background = "#F00"
                })
                // 立即生成一个随机下标 找到对应的li赋值颜色
                var index = Math.floor(Math.random() * lis.length);
                lis[index].style.background = "#" + Math.random().toString(16).slice(2,8)
            },6000)
        }
    </script>
</body>
</html>